<template>
  <div class="mb-4">
    <el-row>
      <el-col :span="6">
        <research1 @output="onput" />
      </el-col>
      <el-col :span="2">
        <el-button type="primary" plain @click="onClick">搜索</el-button>
      </el-col>
      <el-col :span="3">
        <el-button type="info" plain @click="reSet">重置</el-button>   
      </el-col>
    </el-row>
  </div>
  <br />
  <el-col> <el-button  type="danger":icon="Delete" @click="deleteUser">删      除</el-button></el-col>
  <br />

  <el-table :data="tableData" border style="width: 100%" @selection-change="selectDeleteUser">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="username" label="用户名" width="100" />
    <el-table-column prop="account" label="账号" width="150" />
    <el-table-column prop="password" label="密码" width="150" />
    <el-table-column prop="phone" label="手机号" width="180" />
    <el-table-column prop="email" label="邮箱" width="180" />
    <el-table-column prop="sex" label="性别" width="80" />
    <el-table-column prop="birthday" label="生日" width="250" />
    <el-table-column prop="createDate" label="创建日期" width="200" />
  </el-table>
</template>

<script lang="ts">
import research1 from './research1.vue'
import type { dataType } from 'element-plus/es/components/table-v2/src/common.mjs';
export default {
  components: {
    research1
  }
}
</script>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
let input = ref(0);


const onput = function(e) {
  console.log(e);
  input.value = e;
}
function onClick() {
  try {
    console.log(input.value);
    axios.get('http://localhost:9001/UserAccount/searchUser', {
      params: {
        info: input.value
      }
    }).then(response => {
      console.log(input);
      tableData.value = response.data;
    });
  } catch (error) {
    console.error('连接失败：', error.message);
  }
}

function reSet() {
  //input.value = "";
  try {
    axios.get('http://localhost:9001/UserAccount/getAllUser', {
      params: {
        info: input.value
      }
    }).then(response => {
      console.log(input);
      tableData.value = response.data;
    });
  } catch (error) {
    console.error('连接失败：', error.message);
  }
}

import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
import axios from 'axios';

const tableData = ref([]);


onMounted(async () => {
  try {
    const response = await axios.get('http://localhost:9001/UserAccount/getAllUser');
    tableData.value = response.data;
    console.log(response.data);
  } catch (error) {
    console.error('连接失败：', error.message);
  }
});


const selectedRows = ref([]);
const selectDeleteUser=(select) => {
  console.log(select);
  selectedRows.value=select;
}
function deleteUser(){
  console.log(selectedRows.value);
  axios.post('http://localhost:9001/UserAccount/deleteUser',selectedRows.value).then(response => {
    alert("删除成功!")
  })
}
  
  

</script>
